<template>
  <div id="player" class="video-player"></div>
</template>
<script setup lang="ts">
import '@/assets/js/hikH5Player/h5player.min.js';

const props = defineProps({
  splitNum: {
    type: Number,
    default: 1,
    required: false
  }
});

const player = ref(null);
const splitNum = ref(props.splitNum);
const token = '';

watch(
  () => props.splitNum,
  (newVal) => {
    splitNum.value = newVal ? newVal : 1;
    player.value.JS_ArrangeWindow(splitNum.value).then(
      () => {
        console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
      },
      (e) => {
        console.error(e);
      }
    );
  }
);

const createPlayer = () => {
  if(!player.value){
    player.value = new JSPlugin({
      szId: 'player', //父窗口id，需要英文字母开头 必填
      szBasePath: './hikH5Player', // 必填,与h5player.min.js的引用路径一致
      iMaxSplit: 4,
      iCurrentSplit: 1,
      openDebug: true,
      mseWorkerEnable: true, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
      bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
      oStyle: {
        borderSelect: '#FFCC00'
      }
    });

    // 事件回调绑定
    player.value.JS_SetWindowControlCallback({
      windowEventSelect: function (iWndIndex) {
        //插件选中窗口回调
        console.log('windowSelect callback: ', iWndIndex);
      },
      pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
        //插件错误回调
        console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
      },
      windowEventOver: function (iWndIndex) {
        //鼠标移过回调
        //console.log(iWndIndex);
      },
      windowEventOut: function (iWndIndex) {
        //鼠标移出回调
        //console.log(iWndIndex);
      },
      windowEventUp: function (iWndIndex) {
        //鼠标mouseup事件回调
        //console.log(iWndIndex);
      },
      windowFullCcreenChange: function (bFull) {
        //全屏切换回调
        console.log('fullScreen callback: ', bFull);
      },
      firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
        //首帧显示回调
        console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
      },
      performanceLack: function (iWndIndex) {
        //性能不足回调
        console.log('performanceLack callback: ', iWndIndex);
      },
      StreamEnd: function (iWndIndex) {
        //性能不足回调
        console.log('recv StreamEnd: ', iWndIndex);
      },
      StreamHeadChanged: function (iWndIndex) {
        console.log('recv StreamHeadChanged: ', iWndIndex);
      },
      ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
        console.log('recv ThumbnailsEvent: ' + iWndIndex + ', eventType:' + eventType + ', eventCode:' + eventCode);
      },
      InterruptStream: (iWndIndex, iTime) => {
        console.log('recv InterruptStream: ' + iWndIndex + ', iTime:' + iTime);
      },
      ElementChanged: (iWndIndex, szElementType) => {
        //回调采用的是video还是canvas
        console.log('recv ElementChanged: ' + iWndIndex + ', szElementType:' + szElementType);
      }
    });
  }
};

/* 预览&对讲 */
/* mode 0普通 1高级 */
const realPlay = (playURL, mode, wndIndex) => {
  const index = wndIndex ? wndIndex : player.value.currentWindowIndex;
  player.value.JS_SetTraceId(index, true);
  player.value.JS_Play(playURL, { playURL, mode, keepDecoder: 0, token }, index).then(
    () => {
      console.log('realplay success');
      player.value.JS_GetTraceId(index).then((id) => {
        console.log('traceid:', id);
      });
    },
    (e) => {
      console.error(e);
    }
  );
};

const stopPlay = () => {
  player.value.JS_Stop().then(
    () => {
      console.log('stop realplay success');
    },
    (e) => {
      console.error(e);
    }
  );
};

const stopAllPlay = () => {
  player.value.JS_StopRealPlayAll().then(
    () => {
      console.log('stopAllPlay success');
    },
    (e) => {
      console.error(e);
    }
  );
};

onMounted(() => {
  window.addEventListener('resize', () => {
    player.value.JS_Resize();
  });
});

defineExpose({ realPlay, stopPlay, stopAllPlay, createPlayer });
</script>
<style scoped lang="scss">
.video-player {
  width: 100%;
  height: 100%;
}
</style>
